<template>
	<view class="container">
		<template v-if="!multiple">
			<view class="han-select-list">
				<view class="item gui-flex gui-space-between gui-border-b" :class="{'active':index == currentIndex}"
					v-for="(item,index) in list" :key="index" @click="handleClickItem(item,index)">
					<text class="gui-color-black">{{ item.name }}</text>
					<text class="gui-icons">&#xe60f;</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="han-select-list">
				<view class="item gui-flex gui-space-between gui-border-b" :class="{'active': isChecked(item)}"
					v-for="(item,index) in list" :key="index" @click="handleClickItem1(item,index)">
					<text class="gui-color-black">{{ item.name }}</text>
					<text class="gui-icons">&#xe60f;</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			//是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			//再次点击取消选中
			isToggle: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				currentIndex: -1,
				checkList:[]
			}
		},
		onLoad() {

		},
		mounted() {
			
		},
		methods: {
			isChecked(item){
				return this.checkList.find(node=>{
					return node.id === item.id
				})
			},
			handleClickItem(item, index) {
				if(this.currentIndex == index){
					if(this.isToggle){
						this.currentIndex = -1;
						this.$emit('change', null , index);
						return false;
					}
				}
				this.currentIndex = index;
				this.$emit('change', item, index)
			},
			handleClickItem1(item,index){
				let currentItem = this.checkList.find(node=>{
					return node.id === item.id
				})
				let currentIndex = this.checkList.findIndex(node=>{
					return node.id == item.id
				});
				if(currentItem){
					this.checkList.splice(currentIndex,1)
				}else{
					this.checkList.push(item)
				}
				this.$emit('change',this.checkList)
			},
			reset(type){
				this.checkList = [];
				if(type){
					this.currentIndex = -1
				}else{
					this.currentIndex = 0
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.han-select-list {
		.item {
			height: 100rpx !important;
			line-height: 100rpx !important;
			padding: 0 20rpx;
		}

		.item.active {
			background-color: #fff4f2;
			font-weight: bold;

			.gui-icons {
				color: #e6331c !important;
			}
		}
	}
</style>